.interactive-charts {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.interactive-chart-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.interactive-chart-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.interactive-chart-card .ant-card-head {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}

.interactive-chart-card .ant-card-head-title {
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
}

.interactive-chart-card .ant-card-head-title span {
  color: #fff !important;
}

.interactive-chart-card .ant-card-head-title .anticon {
  color: inherit !important;
}

.interactive-chart-card .ant-card-extra {
  color: #fff;
}

.interactive-chart-card .ant-card-extra .ant-btn {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.interactive-chart-card .ant-card-extra .ant-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.interactive-chart-card .ant-card-extra .ant-select {
  color: #fff;
}

.interactive-chart-card .ant-card-extra .ant-select .ant-select-selector {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.interactive-chart-card .ant-card-extra .ant-select .ant-select-arrow {
  color: #fff;
}

.interactive-chart-card .ant-card-extra .ant-switch {
  background: rgba(255, 255, 255, 0.3);
}

.interactive-chart-card .ant-card-extra .ant-switch-checked {
  background: #52c41a;
}

/* 自定义工具提示样式 */
.custom-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.tooltip-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #262626;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 4px;
}

.custom-tooltip p {
  margin: 4px 0;
  font-size: 13px;
}

/* 图表容器样式 */
.recharts-wrapper {
  border-radius: 8px;
}

/* 缩放条样式 */
.recharts-brush .recharts-brush-slide {
  fill: rgba(24, 144, 255, 0.1);
  stroke: #1890ff;
}

.recharts-brush .recharts-brush-texts text {
  fill: #666;
  font-size: 12px;
}

/* 饼图交互样式 */
.recharts-pie-sector {
  cursor: pointer;
  transition: all 0.3s ease;
}

.recharts-pie-sector:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* 柱状图交互样式 */
.recharts-bar-rectangle {
  transition: all 0.3s ease;
}

.recharts-bar-rectangle:hover {
  filter: brightness(1.2);
}

/* 雷达图样式 */
.recharts-radar-polygon {
  fill-opacity: 0.1;
  stroke-width: 2;
}

.recharts-radar-dot {
  fill: #fff;
  stroke-width: 2;
  r: 4;
}

/* 图例样式 */
.recharts-legend-wrapper {
  padding-top: 20px;
}

.recharts-legend-item {
  margin-right: 20px;
}

/* 坐标轴样式 */
.recharts-cartesian-axis-tick-value {
  font-size: 12px;
  fill: #666;
}

.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: #f0f0f0;
  stroke-dasharray: 3 3;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .interactive-charts {
    padding: 10px;
  }
  
  .interactive-chart-card .ant-card-head-title {
    font-size: 14px;
  }
  
  .interactive-chart-card .ant-card-extra {
    flex-direction: column;
    gap: 8px;
  }
  
  .interactive-chart-card .ant-card-extra .ant-space {
    flex-wrap: wrap;
  }
  
  .custom-tooltip {
    padding: 8px;
    font-size: 12px;
  }
  
  .recharts-legend-item {
    margin-right: 10px;
    font-size: 12px;
  }
}

/* 加载状态样式 */
.chart-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  background: #fafafa;
  border-radius: 8px;
}

/* 动画效果 */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.interactive-chart-card {
  animation: chartFadeIn 0.6s ease-out;
}

/* 选择器样式覆盖 */
.ant-select-dropdown {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ant-select-item-option-selected {
  background-color: #e6f7ff;
}

.ant-select-item-option:hover {
  background-color: #f5f5f5;
}

/* 按钮样式覆盖 */
.ant-btn-sm {
  border-radius: 6px;
  font-size: 12px;
}

/* 开关样式覆盖 */
.ant-switch-small {
  min-width: 28px;
  height: 16px;
  line-height: 16px;
}

.ant-switch-small .ant-switch-handle {
  width: 12px;
  height: 12px;
}

/* 工具提示按钮样式 */
.chart-tooltip-trigger {
  color: rgba(255, 255, 255, 0.8);
  cursor: help;
}

.chart-tooltip-trigger:hover {
  color: #fff;
} 